<template>
  <div>
    <div class="comment-title">
      网友评价
    </div>

    <template v-if="isEmpty">
      <div class="comment-content"
      v-for="(item,index) in commentList" :key="index"
      >
        <div class="content-title clearfix">
          <div class="title-left fl">
            {{item.comName}}
          </div>
          <div class="title-right fr">
            <p>{{item.comTime}}</p>
            <p>{{item.comFrom}}</p>
          </div>
        </div>
        <div class="content">
          <p>
            {{item.comContent}}
          </p>
        </div>
      </div>
    </template>
    <div class="noComment" v-else>
      暂无评论(*´▽｀)ノノ
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      commentList: [],
      isEmpty: true
    }
  },
  created() {
    this.getComments()
  },
  props: ['productid'],
  methods: {
    getComments() {
      this.$http.get('api/getproductcom?'+this.productid).then((res) => {
        this.commentList = res.body.result
        if(this.commentList.length === 0) {
          console.log(1)
          this.isEmpty = false
          return
        }
        // console.log(this.commentList)
        var from = this.commentList[0].comFrom
        this.$emit('func',from)
        // console.log(this.commentList)
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import '../../less/var';
  .comment-title {
    height: 64/@base;
    line-height: 64/@base;
    font-size: 28/@base;
    text-align: center;
    color: #000;
    background-color: #999;
  }
  .comment-content {
    padding: 20/@base;
    .content-title {
      font-size: 28/@base;
      .title-right {
        p {
          font-size: 28/@base;
          line-height: 1.3;
          margin-bottom: 10/@base;
          text-align: right;
        }
      }
    }
    .content {
      p {
        width: 100%;
        font-size: 28/@base;
        line-height: 1.2;
        margin-bottom: 0;
        word-wrap:break-word;
        word-break:break-all;
        overflow: hidden;
        padding-bottom: 15/@base;
        border-bottom: 1px solid #ccc;
      }
    }
  }
  .noComment {
    font-size: 26/@base;
    text-align: center;
    padding: 50/@base 0;
  }
</style>
